<div style="background-color: white;">
    <h1>Welcome to `Your SMART Choice`!</h1>
    <br/>

    <div id="riasec" style="margin-top:40px;padding-left:10px; display:none;">
        <label style="margin-left:15px;">What Do I Like To Do?</label><br/>
        <?php
        $img_prop = array('width' => '150px', 'height' => '100px', 'style' => 'margin-left:-10px;');
        echo load_image('flowchart/riasec.png', $img_prop);
        ?>

    </div>

    <div id="arrow1" style="margin-top:-100px; margin-left:150px; display:none;" >
        <?php
        $img_prop = array('width' => '50px', 'height' => '80px');
        echo load_image('flowchart/arrow-right.png', $img_prop);
        ?>

    </div>

    <div id="career" style="margin-top:-100px; margin-left:240px; display:none;">
        <label style="margin-left:-30px;">What Kind of Career is Suitable For Me?</label><br/>
        <a href="<?php echo site_url('career_display/display_career'); ?>">
            <?php
            $img_prop = array('width' => '150px', 'height' => '100px', 'style' => 'margin-left:-20px;');
            echo load_image('flowchart/career.png', $img_prop);
            ?>

        </a>

    </div>

    <div id="arrow2" style="margin-top:-100px; margin-left:400px; display:none;">
        <?php
        $img_prop = array('width' => '50px', 'height' => '80px');
        echo load_image('flowchart/arrow-right.png', $img_prop);
        ?>

    </div>

    <div id="course" style="margin-top:-100px; margin-left:460px; display:none;">
        <label>What Course Should I Take to be successful to my Career?</label><br/>
        <a class="test" href="<?php echo site_url('course_selection/home'); ?>">
            <?php
            $img_prop = array('width' => '150px', 'height' => '100px');
            echo load_image('flowchart/course1.png', $img_prop);
            ?>
        </a>
    </div>

    <div id="arrow3" style="margin-top:-30px; margin-left:600px; display:none;">
        <?php
        $img_prop = array('width' => '70', 'height' => '70px');
        echo load_image('flowchart/arrow-down.png', $img_prop);
        ?>
    </div>

    <div id="institution" style="margin-top:-20px; margin-left:450px; display:none;">
        <label style="margin-left:20px">Where Should I Study At?</label><br/>
        <a href="<?php echo site_url('institution_selection'); ?>">
            <?php
            $img_prop = array('width' => '120px', 'height' => '100px', 'style' => 'margin-left:20px;');
            echo load_image('flowchart/institution3.png', $img_prop);
            ?>       
        </a>
    </div>

    <div id="arrow4" style="margin-top:-100px; margin-left:400px; display:none;">
        <?php
        $img_prop = array('width' => '50px', 'height' => '80px');
        echo load_image('flowchart/arrow-left.png', $img_prop);
        ?>
    </div>

    <div id="budget" style="margin-top:-100px; margin-left:240px; display:none;">
        <label style="margin-left:-30px">How Much Will Cost Me To Study Abroad?</label><br/>
        <a href="<?php echo site_url('budget_manager/my_budget'); ?>">
            <?php
            $img_prop = array('width' => '120px', 'height' => '100px');
            echo load_image('flowchart/budget.png', $img_prop);
            ?>
        </a>
    </div>

    <div id="arrow5" style="margin-top:-100px; margin-left:150px; display:none;">
        <?php
        $img_prop = array('width' => '50px', 'height' => '80px');
        echo load_image('flowchart/arrow-left.png', $img_prop);
        ?>
    </div>

    <div id="schedule" style="margin-top:-100px; padding-left:10px; display:none;">
        <label style="margin-left:-10px">What I Do Have To Do To Study Abroad?</label><br/>

        <a href="<?php echo site_url('schedule'); ?>">
            <?php
            $img_prop = array('width' => '180px', 'height' => '100px');
            echo load_image('flowchart/schedule.png', $img_prop);
            ?>
        </a>
    </div>
</div>
